import styled from 'styled-components';
import style from '@/assets/global-style';
export const List = styled.div`
  display: flex;
  align-items: center;
  height: 30px;
  overflow: hidden;
  > span:first-of-type {
    display: block;
    display: inline-flex;
    flex: 0 0 auto;
    padding: 5px 0;
    margin-right: 5px;
    color: grey;
    font-size: ${style['font-size-m']};
  }
`;

export const ListItem = styled.span`
  /* flex-grow: 0; // 增长比例，子项合计宽度小于容器宽度，需要根据每个子项设置的此属性比例对剩下的长度进行分配 */
  /* flex-shrink: 1; // 回缩比例，子项合计宽度大于容器宽度，需要根据每个子项设置的此属性比例对多出的长度进行分配 */
  /* flex-basis: auto; // 设置了宽度跟宽度走，没设置宽度跟内容实际宽度走 */
  flex: 0 0 auto;
  font-size: ${style['font-size-m']};
  padding: 5px 8px;
  /* 解决 ios使用border-radius时失效 */
  -webkit-transform: rotate(0deg);
  border-radius: 10px;
  &.selected {
    color: ${style['theme-color']};
    border: 1px solid ${style['theme-color']};
    opacity: 0.8;
  }
`;
